import React, { Component } from "react";
import { View, Text, Dimensions, TouchableOpacity } from "react-native";
import { Toast } from "@ant-design/react-native";

import styles from "./styles";

class LabelGroup extends Component {
  constructor(props) {
    super(props);

    const { value } = this.props;
    const state = {
      selectedTag: [],
    };
    if (value && value.indexOf(",") > 0) {
      state.selectedTag = value.split(",");
    }
    this.state = {
      ...state,
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const { labels, selectedTag } = nextProps;
    const { selectedTag: selectedTagPrev } = prevState;
    return {
      ...prevState,
      labels,
      selectedTag:
        selectedTagPrev && selectedTagPrev.length > 0
          ? selectedTagPrev
          : selectedTag,
      // selectedTag: selectedTag !== selectedTagPrev ? selectedTag : '',
    };
  }

  labelOnPress = label => {
    const { onChange = () => {}, selectedTag: propSelectedTag } = this.props;
    let { selectedTag = [] } = this.state;
    if (
      selectedTag &&
      selectedTag.length <
        (Array.isArray(propSelectedTag) && propSelectedTag.length > 0 ? 5 : 5)
    ) {
      if (selectedTag.includes(label)) {
        selectedTag = selectedTag.filter(item => {
          return item !== label;
        });
      } else {
        selectedTag.push(label);
      }
    } else if (selectedTag.includes(label)) {
      selectedTag = selectedTag.filter(item => {
        return item !== label;
      });
    } else {
      Toast.info("最多选择5个标签");
    }
    onChange(selectedTag.join(","));
    this.setState({
      selectedTag,
    });
  };

  render() {
    const { labels = [], selectedTag = [] } = this.state;
    const {
      title = "",
      info = "",
      style,
      selectable = true,
      addable = false,
      addOnPress = () => {},
    } = this.props;

    const { width: screenWidth } = Dimensions.get("window");
    return (
      <View style={{ ...styles.root, ...style }}>
        <View style={styles.titleAndInfo}>
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.info}>{info}</Text>
        </View>
        <View style={styles.labels}>
          {labels.map &&
            labels.map((item, index) => {
              return selectable ? (
                <TouchableOpacity
                  key={index}
                  onPress={() => this.labelOnPress(item)}
                  style={{
                    ...styles.labelView,
                    width: (screenWidth - 80) / 4,
                    backgroundColor: selectedTag.includes(item)
                      ? "rgb(244,245,245)"
                      : "#FFF",
                    borderWidth: selectedTag.includes(item) ? 0 : 0.5,
                  }}
                >
                  <Text style={styles.labelText}>{item}</Text>
                </TouchableOpacity>
              ) : (
                <View
                  key={index}
                  style={{
                    ...styles.labelView,
                    width: (screenWidth - 80) / 4,
                    backgroundColor: "rgb(244,245,245)",
                    borderWidth: 0,
                  }}
                >
                  <Text style={styles.labelText}>{item}</Text>
                </View>
              );
            })}
          {addable ? (
            <TouchableOpacity
              onPress={addOnPress}
              style={{
                ...styles.labelView,
                width: (screenWidth - 80) / 4,
              }}
            >
              <Text style={styles.labelText}>+添加</Text>
            </TouchableOpacity>
          ) : null}
        </View>
      </View>
    );
  }
}

export default LabelGroup;
